<div>
    <checkout-navbar :option="'5'"/>
    <div class="container-fluid py-5 px-lg-6 px-4" v-if="orderList.orderPart">
        <div class="row">
            <div id="checkout-left-panel-confirm-" class="mt-3 col-sm-12 col-md-6">
                <div class="row text-gdark">
                    <div class="col col-lg-8"><span>Item</span></div>
                    <div class="col col-lg-2 text-center"><span>Quantity</span></div>
                    <div class="col col-lg-2 text-right"><span>Price</span></div>
                </div>
                <hr class="hr-title">
                <div v-if="item.itemTypeEnumId != 'ItemShipping'" v-for="(item, index) in orderList.orderItemList" class="row" >
                    <div class="col col-lg-8">
                        <product-image v-if="item.itemTypeEnumId=='ItemProduct'"  :productId="item.productId" class="mb-1"/>
                        <span v-else></span>
                        <router-link v-if="item.itemTypeEnumId == 'ItemProduct'" class="order-link-text pl-3 align-top"
                                     :to="'/product/'+item.productId" tag="span">
                            {{item.itemDescription}}
                        </router-link>
                        <span v-else class="order-link-text pl-3 align-top">{{item.itemDescription}}</span>
                    </div>
                    <div class="col col-lg-2 text-center">
                        <span class="text-gdark">{{item.quantity}}</span>
                    </div>
                    <div class="col col-lg-2 text-right">
                        <span class="text-gdark">${{item.unitAmount.toFixed(2)}}</span>
                    </div>
                </div>
                <span v-else class="d-none">{{deliveryPrice = item.unitAmount}}</span>
                <hr class="hr-title">
                <div class="row text-gdark">
                    <span class="col col-lg-10">SubTotal</span>
                    <span class="col col-lg-2 text-right">
                        ${{(orderList.orderPart.partTotal - deliveryPrice).toFixed(2)}}</span>
                </div>   
                <hr class="hr-small w-100">
                <div class="row text-gdark">
                    <span class="col col-lg-10">Delivery</span>
                    <span class="col col-lg-2 text-right">
                        ${{deliveryPrice.toFixed(2)}}</span>
                </div>   
                <hr class="hr-small w-100">
                <div class="row text-gdark">
                    <span class="col col-lg-10">TOTAL</span>
                    <span class="col col-lg-2 text-right">
                        ${{orderList.orderHeader.grandTotal}}</span>
                </div>
                <div class="row mt-5">
                    <contact-info/>
                </div>
            </div>
            <div class="offset-md-1 mt-3 col-sm-12 col-md-5">
                <div class="row">
                    <span class="col order-title">
                        <span class="text-glight text-bold">THANK YOU</span> 
                        <span class="text-gdark"> FOR YOUR PURCHASE</span>
                    </span>
                </div>
                <hr class="hr-title">
                <div class="row mb-2">
                    <span class="col text-blight">ORDER NUMBER: </span>
                    <a class="col order-link-text" :href="'/store/d#/orders/'+orderList.orderHeader.orderId">
                        {{orderList.orderHeader.orderId}}
                    </a>
                </div>
                <div class="row mb-2">
                    <span class="col text-blight">STATUS: </span>
                    <span class="col order-status">{{orderList.orderHeader.statusId}}</span>
                </div>
                <div class="row mb-2">
                    <span class="col text-blight">ORDER DATE: </span>
                    <span class="col text-gdark">{{formatDate(orderList.orderHeader.placedDate)}}</span>
                </div>
                <div class="row mb-2">
                    <span class="col text-blight">EXPECTED ARRIVAL: </span>
                    <span class="col text-gdark">{{formatDate(orderList.orderHeader.placedDate)}}</span>
                </div>
                <hr class="hr-title">
                <div class="row">
                    <span class="col text-blight">SHIPPED TO:</span>
                    <span class="col text-gdark">
                        <span class="text-uppercase">
                            {{customerInfo.firstName}} {{customerInfo.lastName}}
                        </span><br>
                        <span class="span-description d-inline-block mb-2">
                            <i class="fas fa-envelope mr-2"></i>{{customerInfo.emailAddress}}<br>
                            <span v-if="customerInfo.telecomNumber">
                                <i class="fa fa-phone mr-2"></i>{{customerInfo.telecomNumber.contactNumber}}
                            </span>
                        </span><br>
                        {{orderList.postalAddress.address1}} {{orderList.postalAddress.address2}}<br>
                        {{orderList.postalAddress.city}}, {{orderList.postalAddressStateGeo.geoCodeAlpha2}} {{orderList.postalAddress.postalCode}}<br>
                    </span>
                </div>
                <hr class="hr-title">
                <div class="row ">
                    <span class="col text-blight">BILLED TO:</span>
                    <span class="col text-gdark">
                        <span class="text-uppercase">
                            {{orderList.paymentInfoList[0].paymentMethod.titleOnAccount}}
                        </span><br>
                        {{orderList.paymentInfoList[0].paymentMethod.description}}<br>
                    </span>
                </div>
                <div class="row justify-content-center mt-5">
                    <a class="btn btn-block btn-info btn-lg btn-keep-shoping" :href="homePath">Keep Shopping</a>
                </div>
            </div>
        </div>
    </div>
</div>
